<template>
	<view class="inform">
		<view class="inform-time last-three-day">{{$t('chat.last_three_day')}}</view>
		<!-- 好友 -->
		<view class="movable-container">
			<movable-area class="t-conversation-item-container note-section" v-for="(item,index) in list" :key="index"
				v-if="isThreeDay(item.AddTimeText)&& (item.BizType == 22 ||item.BizType == 21) && item.DealType != 2">
				<movable-view class="t-conversation-item" direction="horizontal"
					@click="$goPage('/note/inform/detail',{sid:item.Sid})" damping="100">
					<view class="u-flex" style="width: 100%">
						<view class="avatar-box">
							<image class="t-conversation-item-avatar" :src="item.FriendAvatar">
								<u-badge :is-dot="true" type="error" :offset="[-4,4]" v-if="item.ReadTime <= 0">
								</u-badge>
							</image>
						</view>
						<view class="t-conversation-item-content-text">
							<view class="t-conversation-item-content">
								<view class="tui-inform-name">{{item.FriendName}}</view>
								<view class="tui-inform-message">{{$t('chat.user_iam')}}{{item.Content}}</view>
							</view>
							<view class="btn">
								<view class="add-text" v-if="item.DealType == 1">{{$t('chat.added')}}</view>
								<view class="accept-text" v-if="item.DealType == 0" @click.stop="actAgree(item.Sid)">
									{{$t('chat.accept')}}</view>
							</view>
						</view>
					</view>
				</movable-view>
			</movable-area>
		</view>
		<!-- 三天前 -->
		<view class="result-type">
			<view class="inform-time">{{$t('chat.front_three_day')}}</view>
			<view class="movable-container">
				<movable-area class="t-conversation-item-container note-section" v-for="(item,index) in list"
					:key="index" v-if="!isThreeDay(item.AddTimeText) && (item.BizType == 22 ||item.BizType == 21) ">
					<movable-view class="t-conversation-item" direction="horizontal"
						@click="item.DealType == 0 ?'': $goPage('/note/inform/detail',{sid:item.Sid})" damping="100">
						<view class="u-flex" style="width: 100%">
							<view class="avatar-box">
								<image class="t-conversation-item-avatar" :src="item.FriendAvatar">
								</image>
							</view>
							<view class="t-conversation-item-content-text">
								<view class="t-conversation-item-content">
									<view class="tui-inform-name">{{item.FriendName}}</view>
									<view class="tui-inform-message">{{$t('chat.user_iam')}}{{item.Content}}</view>
								</view>
								<view class="add-text" v-if="item.DealType == 1">{{$t('chat.added')}}</view>
								<view class="overdue" v-if="item.DealType == 0 || item.DealType == 2">{{$t('chat.overdate')}}
								</view>
							</view>
						</view>
					</movable-view>
				</movable-area>
			</view>
		</view>
	</view>
</template>

<script>
	import pageMixin from '@/utils/pageMixin';
	export default {
		mixins: [pageMixin],
		data() {
			return {
				msgType: 0,
				list: [],
				status: 'nomore',
				iconType: 'flower',
				loadText: {
					loadmore: this.$t('chat.pull_up'),
					loading: this.$t('chat.loading'),
					nomore: this.$t('chat.note_no_more'),
				},
				isMore: false,
				isReaded: false,
				isDeleted: false,
			}
		},

		onLoad(option) {
			uni.setNavigationBarTitle({
				title: this.$t('chat.notice_title')
			});
			this.msgType = option.type || 0;
		},
		onShow() {
			this.getList();
		},
		components: {},
		computed: {
			i18n() {
				return this.$t('chat')
			}
		},
		methods: {
			getList() {
				let that = this;
				that.$http.get('/msg/system/list/data', {
					type: that.msgType
				}).then(res => {
					if (res.length === 0) {
						that.list = []
					}
					that.updateSystemNotifyMsgUnread()
					for (let i = 0; i < res.length; i++) {
						let type = res[i].Type || 0;
						let bizType = res[i].BizType || 0;
						let content = res[i].Content;
						if (that.$t('chat.msg_title_.'+ bizType) !== undefined) {
							res[i].Title = that.$t('chat.msg_title_.'+ bizType);
						}
						if (that.$t('chat.msg_content_.'+ bizType) !== undefined) {
							if (that.$t('chat.msg_content_.'+ bizType) !== undefined && type != 2) {
								//let number = res[i].Content.replace(/[^0-9]/ig, "");
								let number = (res[i].Content.match(/\d+个工程/g) + "").match(/\d+/g);
								content = that.$t('chat.msg_content_.'+ bizType);
								if (this._i18n.locale == '中文') {
									content = content.replace('[projectName]', res[i].ProjectName)
								} else {
									content = content.replace('[projectName]', res[i].ShipName)
								}
								content = content.replace('[userName]', res[i].ExtDataJson.AddAccName || '')
								content = content.replace('[number]', number)
								res[i].Content = content;
							}

							//确认结果状态，2：确认、3：驳回
							let stat = res[i].ExtDataJson.Stat || 0;
							//alert(res[i].ExtDataJson.stat+"-----"+stat);
							if (stat == 3) {
								let rejectRmk = res[i].ExtDataJson.RejectRmk || '';
								if (rejectRmk != '') {
									content = content.replace('[rejectRmk]', rejectRmk)
									res[i].Content = content;
								}
							} else if (stat == 2) {
								if (that.$t('chat.msg_content_'+ bizType +'_confirm') !== undefined) {
									//let number = res[i].Content.replace(/[^0-9]/ig, "");
									let number = (res[i].Content.match(/\d+个工程/g) + "").match(/\d+/g);
									let content = that.$t('chat.msg_content_'+ bizType +'_confirm');
									if (this._i18n.locale == '中文') {
										content = content.replace('[projectName]', res[i].ProjectName)
									} else {
										content = content.replace('[projectName]', res[i].ShipName)
									}
									content = content.replace('[userName]', res[i].ExtDataJson.AddAccName || '')
									content = content.replace('[number]', number)
									res[i].Content = content;
								}
							}
						}
						that.list = res

					}
				})

			},
			onNavigationBarButtonTap(e) {
				if (e.type == 'close') {
					this.$u.route({
						type: 'back',
						delta: 1
					});
					return;
				}
				if (e.text == '...' && !this.publishButoonDisable) {
					this.isMore = !this.isMore;
				}
			},
			cancelModal() {
				this.isMore = false;
			},
			isThreeDay(time) {
				var acceptDay = new Date(time)
				var acceptDays = new Date(acceptDay.getFullYear(), acceptDay.getMonth(), acceptDay.getDate())
				var nowDay = new Date()
				var nowDays = new Date(nowDay.getFullYear(), nowDay.getMonth(), nowDay.getDate())
				if ((nowDays - acceptDays) / 1000 / 60 / 60 / 24 < 3) {
					return true
				} else {
					return false
				}
			},
			actRead() {
				this.isMore = false;
				this.isReaded = false;
				this.$http.get('/msg/system/read').then(res => {
					this.getList()
				})
			},
			actAgree(sid) {
				let data = {
					sid: sid,
					deal_type: 1,
				};
				this.$http.post('/msg/system/deal', data).then(res => {
					uni.showToast({
						title: '同意成功'
					});
					this.getList()
				});
			},
			actDelete() {
				this.isMore = false;
				this.isDeleted = false;
				this.$http.get('/msg/system/delete', {
					type: this.msgType
				}).then(res => {
					this.getList();
				})
			},
			updateSystemNotifyMsgUnread() {
				let unreadTotal = 0
				this.$http.get('/msg/system/type/count').then(res => {
					unreadTotal += res.totalCount
					let msgCountTotal = 0
					msgCountTotal += res.count2
					uni.setStorageSync('systemNotifyMsgUnread', unreadTotal)
					if (unreadTotal > 0) {
						if (unreadTotal > 99) {
							unreadTotal = '99+'
						}
						plus.runtime.setBadgeNumber(unreadTotal)
					} else {
						plus.runtime.setBadgeNumber(0)
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.inform {
		padding-bottom: 30rpx;
	}

	.inform-time {
		padding: 20rpx 20rpx 20rpx 30rpx;
		font-size: 30rpx;
		font-family: Adobe Heiti Std;
		font-weight: normal;
		color: #131313;
	}

	.last-three-day {
		border-top: 1px solid #dfe2e2;
		margin-top: 10rpx;
		padding-top: 30rpx;
	}

	.result-header {
		font-size: 28rpx;
		font-family: Adobe Heiti Std;
		font-weight: normal;
		color: #8D8D8D;
		padding: 20rpx 0 20rpx 28rpx;
		background-color: #fff;
		border-bottom: 1px solid #eaedec;
	}

	.t-conversation-item-container {
		width: 100vw;
		height: 150rpx;
		background-color: #FFFFFF;
	}

	.result-type {
		margin-top: 16rpx;

	}

	.movable-container {
		.t-conversation-item-container:last-child {
			.t-conversation-item-content-text {
				border-bottom: none ;
			}
		}
	}

	.t-conversation-item {
		width: 100vw;
		height: 150rpx;
		display: flex;
		left: 0;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;

	}

	.avatar-box {
		position: relative;
		display: inline-flex;
	}

	.t-conversation-item-avatar {
		position: relative;
		width: 80rpx;
		height: 80rpx;
		border-radius: 16rpx;

		/*padding-left: 40rpx;*/
		/*padding-right: 24rpx;*/
		/*padding-bottom: 28rpx;*/
		/*padding-top: 28rpx;*/
		margin: 0 14rpx 0 28rpx;
		overflow: auto;
	}

	.t-conversation-item-content-text {
		flex: 1;
		display: flex;
		height: 150rpx;
		justify-content: space-between;
		border-bottom: 2rpx solid #EEF0F3;
		padding-right: 16rpx;
	}

	.t-conversation-item-content {
		flex: 1;
		height: 150rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding-left: 10rpx;
		margin-left: 10rpx;
	}

	.tui-inform-name {
		line-height: 44rpx;
		font-size: 32rpx;
		font-family: Adobe Heiti Std;
		font-weight: normal;
		color: #131313;
	}

	.tui-inform-message {
		font-size: 27rpx;
		font-family: Adobe Heiti Std;
		font-weight: normal;
		color: #98A0A1;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		width: 300rpx;
	}

	.add-text,
	.overdue {
		height: 150rpx;
		line-height: 150rpx;
		font-size: 32rpx;
		font-family: Adobe Heiti Std;
		font-weight: normal;
		color: #8B9293;
		margin-right: 36rpx;
	}

	.btn {
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.accept-text {
		font-size: 32rpx;
		font-family: Adobe Heiti Std;
		font-weight: normal;
		color: #0B91FF;
		height: 80rpx;
		background: #EEEEEE;
		border-radius: 16rpx;
		padding: 16rpx 36rpx;
		margin-right: 16rpx;
	}
</style>
